<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>积分商城</title>
    <link rel="stylesheet" href="__PUBLIC__/Card/css/weui.css" />
    <link rel="stylesheet" href="__PUBLIC__/Card/css/goods.css" />
</head>
<style type="text/css">
    body {
        background: #F8F8F8;
    }
    .weui-media-box__thumb {
        width: 100%;
        height: 100%;
    }
    .weui-navbar__item.weui-bar__item_on {
        background: #fff;
        color: #FD807A;
    }
    .text-right {
        text-align: right;
        color: #FF8079;
    }
    .weui-navba {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        position: fixed;
        z-index: 500;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0px -3px 3px #eee;
    }
    .weui-tab__panel {
        margin-bottom: 50px;
    }
    .weui-tab__panel dl {
        width: 44%;
        float: left;
        margin-top: 15px;
        background: #fff;
        box-shadow: -2px -2px 2px #EBEBEB,2px 2px 2px #EBEBEB,2px -2px 2px #EBEBEB,-2px 2px 2px #EBEBEB;
    }
    .weui-tab__panel dl:nth-child(2n) {
        margin-right: 4%;
    }
    .weui-tab__panel dl:nth-child(2n+1) {
        margin-left: 4%;
        margin-right: 4%;
    }
    .weui-tab__panel dl dt img {
        width: 100%;
    }
    .jifen {
        color: #F9827C;
    }
    .weui-tab__panel dl dd {
        padding: 10px;
    }
    .weui-tab__panel dl dd p:nth-child(1) {
        font-size: 14px;
    }
    .weui-tab__panel dl dd p:nth-child(2) {
        font-size: 12px;
    }
    .weui-media-box_appmsg .weui-media-box__hd{
        width: 35px;
        height: 35px;
    }
    .weui-media-box__title{
        font-size: 14px;
    }
    .jifen{
        font-size: 12px;
    }
    .weui-media-box{
        padding: 10px 15px;
    }
    .weui-media-box_appmsg .flex2{
        -webkit-box-flex: 2;
        -webkit-flex: 2;
        flex: 2;
    }
</style>
<body>
<div class="container" id="container">
    <div class="page navbar js_show">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel">
                    <volist name="list" id="vo">

                        <dl>
                            <a href="{:U('Usercard/goodsdetail',array('id'=>$vo['id'],'openid'=>$card['openid'],'card_id'=>$card['card_id],'code'=>$card['code'],'mid'=>$card=>$card['mid']))}" >
                          <dt>
                            <img src="{$vo.img}" alt="" />
                          </dt>
                          <dd>
                            <p>{$vo.name}</p>
                            <p class="jifen">{$vo.price}积分</p>
                          </dd>
                            </a>
                        </dl>

                    </volist>
                </div>
                <div class="weui-tab__panel" style="display:none;">
                    <div class="weui-panel weui-panel_access">
                        <div class="weui-panel__bd">
                            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd">
                                    <img class="weui-media-box__thumb" src="__PUBLIC__/Card/images/jifen.png" alt="">
                                </div>
                                <div class="weui-media-box__bd flex2">
                                    <h4 class="weui-media-box__title">订单号:123693478933</h4>
                                    <p class="weui-media-box__desc">2014-09-07 12:00:34</p>
                                </div>
                                <div class="weui-media-box__bd text-right">600积分</div>
                            </a>
                            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd">
                                    <img class="weui-media-box__thumb" src="__PUBLIC__/Card/images/jifen.png" alt="">
                                </div>
                                <div class="weui-media-box__bd flex2">
                                    <h4 class="weui-media-box__title">订单号:123693478933</h4>
                                    <p class="weui-media-box__desc">2014-09-07 12:00:34</p>
                                </div>
                                <div class="weui-media-box__bd text-right">600积分</div>
                            </a>
                            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd">
                                    <img class="weui-media-box__thumb" src="__PUBLIC__/Card/images/jifen.png" alt="">
                                </div>
                                <div class="weui-media-box__bd flex2">
                                    <h4 class="weui-media-box__title">订单号:123693478933</h4>
                                    <p class="weui-media-box__desc">2014-09-07 12:00:34</p>
                                </div>
                                <div class="weui-media-box__bd text-right">600积分</div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="weui-navba">
                    <div class="weui-navbar__item weui-bar__item_on">
                        积分兑换
                    </div>
                    <div class="weui-navbar__item">
                        我的记录
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('.weui-navbar__item').on('click', function() {
            var index = $(this).index();
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            $(".weui-tab__panel").css("display", "none").eq(index).css("display", "block");
        });

    });
</script>

</html>